<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link rel="stylesheet" type="text/css" href="../static/css/basic.css">
    <link src="../static/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/js/filter.js"></script>
    <script src="../static/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="../static/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../static/js/basic.js"></script>
    <style>
        .search label {
            font-weight: normal;
            margin-right: 20px;
        }
        select {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        #total-amount ,#total-platform-profit{
            display: inline-block;
            margin-right: 40px;
        }
        .profit{
            font-size: 16px;
            margin-top: 10px;
        }
        table tr {
            height: 28px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="search">
    <label>
        商户名称：
        <select name="" id="select-merchant-name"></select>
    </label>
    <label for="">
        代理名称：
        <select name="" id="select-agent-name"></select>
    </label>
    <label for="">
        上游通道名：
        <select name="" id="search-order-supplier-name"></select>
    </label>
    <label for="">
        支付类型：
        <select name="" id="pay-type">
            <option value="">请选择</option>
            <option value="WEIXIN_SCAN">微信扫码</option>
            <option value="WEIXIN_H5">微信H5</option>
            <option value="WEIXIN_SYT">微信收银台</option>
            <option value="ALI_SCAN">支付宝扫码</option>
            <option value="ALI_H5">支付宝H5</option>
            <option value="ALI_SYT">支付宝收银台</option>
            <option value="QQ_SCAN">QQ扫码</option>
            <option value="QQ_H5">QQ-H5</option>
            <option value="QQ_SYT">QQ收银台</option>
            <option value="UNION_SCAN">银联扫码</option>
            <option value="UNION_H5">银联H5</option>
            <option value="UNION_PC_WAP">银联pc-web</option>
            <option value="UNION_SYT">银联收银台</option>
            <option value="UNION_FAST">银联快捷</option>
            <option value="BAIDU_SCAN">百度钱包扫码</option>
            <option value="BAIDU_H5">百度钱包H5</option>
            <option value="BAIDU_SYT">百度钱包收银台</option>
            <option value="JD_SCAN">京东扫码</option>
            <option value="JD_H5">京东H5</option>
            <option value="JD_SYT">京东收银台</option>
        </select>
    </label>
    <label>
        开始时间：
        <input type="text" name="" value="" id="start-time" class="start-time" value="">
    </label>
    <label>
        结束时间：
        <input type="text" name="" value="" id="end-time" class="end-time" value="">
    </label>
    <label for="">
        <input type="button" class="btn btn-primary" value="搜索" onclick="search();">
    </label>

    <label for="" class="profit">
        <span class="color-red">交易总金额：</span>
        <span id="total-amount" class="color-red">00.00</span>
        <span class="disabled"></span>
        <span class="color-red">平台总纯利润：</span>
        <span id="total-platform-profit" class="color-red">00.00</span>
        <span class="disabled"></span>
        <span class="color-red">代理总利润：</span>
        <span id="total-agent-profit" class="color-red">00.00</span>
    </label>
</div>
<div class="menu-table">
    <table>
        <thead class="thead-dark">
        <tr>
            <th>序列号</th>
            <th>商户名称</th>
            <th>所属代理</th>
            <th>上游名称</th>
            <th>支付方式</th>
            <th>交易金额</th>
            <th>交易笔数</th>
            <th>平台纯利润</th>
            <th>代理纯利润</th>
        </tr>
        </thead>
        <tbody id="table-body">
        </tbody>
    </table>
</div>

<script>
    function getCutValues() {

        let merchantUid = $("#select-merchant-name").val();
        let agentUid = $("#select-agent-name").val();
        let supplierUid = $("#search-order-supplier-name").val();
        let payType = $("#pay-type").val();
        let startTime = $("#start-time").val();
        let endTime = $("#end-time").val();

        return {

            "merchantUid": merchantUid,
            "agentUid":agentUid,
            "supplierUid": supplierUid,
            "payType": payType,
            "startTime": startTime,
            "endTime": endTime
        };
    }
    function randProfit(res) {
        $("#total-amount").html(res.TotalAmount);
        $("#total-platform-profit").html(res.PlatformTotalProfit);
        $("#total-agent-profit").html(res.AgentTotalProfit);

        let str = "";
        for (let i = 0; i < res.ProfitList.length; i ++) {
            let v = res.ProfitList[i];
            let tmp = "<tr>" + "<th>" + (i+1) + "</th>" +
                    "<th>" + v.MerchantName + "</th>" + "<th>" + v.AgentName + "</th>" + "<th>" + v.SupplierName + "</th>" +
                    "<th>" + v.PayTypeName + "</th>" + "<th>" + v.OrderAmount + "</th>" + "<th>" + v.OrderCount + "</th>" +
                    "<th>" + v.PlatformProfit + "</th>" +"<th>" + v.AgentProfit + "</th>" + "</tr>";
            str = str + tmp;
        }

        $("#table-body").html(str);
    }
    function search() {
        $.ajax({
            url: "/get/profit",
            data: getCutValues(),
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    alert("系统异常，请稍后再试");
                } else {
                    randProfit(res);
                }
            },
        });
    }
    $(function () {
        setMerchant();
        setSupplier();
        setAgent();
        search();
    })
</script>
</body>
</html>